<template>
  <div class="dialog">
    <!-- 这里的内容写死，就不灵活了，所以用一个占位符来占位 -->
    <!-- 父组件在使用子组件的时候，给子组件传递结构，传递什么结构，就展示什么结构 -->
    <!-- 这个占位符就叫做插槽 -->
    <!-- 第一个插槽接收标题 -->
    <slot name="title"><h3>提示</h3></slot>
    <hr>
    <!-- 第二个插槽接收对话框的内容 -->
    <slot name="content" uname="zs" age="20"></slot>
    <hr>
    <!-- 第三个插槽接收按钮（没有指定name的插槽，他的name="default") -->
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.dialog {
  border: 3px solid #000;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  box-shadow: 5px 5px 5px 5px;
}
</style>